<script setup>
import { ref, computed } from 'vue'
import { studentOptions } from '../../services/student'

const props = defineProps({
  selectedStudents: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['confirm', 'cancel'])

// 表单数据
const form = ref({
  class: '',
  group: '',
  teacher: ''
})

// 选项
const classOptions = studentOptions.classes.map(item => ({ label: item, value: item }))
const groupOptions = studentOptions.groups.map(item => ({ label: item, value: item }))
const teacherOptions = studentOptions.teachers.map(item => ({ label: item, value: item }))

// 对话框可见性
const dialogVisible = ref(false)

// 已选择的学生信息
const selectedInfo = computed(() => {
  if (!props.selectedStudents.length) return ''
  
  // 显示选中学生的数量和名称
  const names = props.selectedStudents.map(s => s.name).slice(0, 3)
  const count = props.selectedStudents.length
  
  if (count <= 3) {
    return `已选择 ${count} 名学生：${names.join('、')}`
  } else {
    return `已选择 ${count} 名学生：${names.join('、')}等`
  }
})

// 重置表单
const resetForm = () => {
  form.value = {
    class: '',
    group: '',
    teacher: ''
  }
}

// 打开对话框
const openAssignDialog = () => {
  resetForm()
  dialogVisible.value = true
}

// 确认分配
const handleConfirm = () => {
  // 检查是否至少填写了一项
  if (!form.value.class && !form.value.group && !form.value.teacher) {
    ElMessage.warning('请至少选择一项分配信息')
    return
  }
  
  emit('confirm', form.value)
  dialogVisible.value = false
}

// 取消分配
const handleCancel = () => {
  emit('cancel')
  dialogVisible.value = false
}

// 对外暴露方法
defineExpose({
  openAssignDialog
})
</script>

<template>
  <el-dialog
    title="学生分配"
    v-model="dialogVisible"
    width="500px"
    @closed="handleCancel"
  >
    <div class="assign-dialog">
      <el-alert
        v-if="selectedInfo"
        type="info"
        :closable="false"
        class="student-info"
      >
        {{ selectedInfo }}
      </el-alert>
      
      <el-form :model="form" label-width="80px" class="assign-form">
        <el-form-item label="班级">
          <el-select v-model="form.class" placeholder="请选择班级" clearable>
            <el-option
              v-for="item in classOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="小组">
          <el-select v-model="form.group" placeholder="请选择小组" clearable>
            <el-option
              v-for="item in groupOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="老师">
          <el-select v-model="form.teacher" placeholder="请选择老师" clearable>
            <el-option
              v-for="item in teacherOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.assign-dialog {
  padding: 10px;
}

.student-info {
  margin-bottom: 20px;
}

.assign-form :deep(.el-select) {
  width: 100%;
}

:deep(.el-select .el-input__wrapper) {
  background-color: var(--el-bg-color);
  box-shadow: 0 0 0 1px var(--el-border-color) inset;
}

:deep(.el-form-item__label) {
  color: var(--el-text-color-regular);
}
</style>
